import { Fragment } from '@/components/Fragment'; 
import { Flex, Text, Button, View } from '@aws-amplify/ui-react';
import { FlexDemo } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import { DefaultFlexExample } from './examples';

The Flex primitive provides a Flexbox container with style `display: flex`. To learn how to use Flexbox CSS properties, see the following documentation:

- [Flex layout - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
- [A Complete Guide to Flex - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

## Demo

<FlexDemo />

## Usage

Import the Flex primitive.

<Example>
  <View>
    <DefaultFlexExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/DefaultFlexExample.tsx

```

  </ExampleCode>
</Example>

### Mapping Flexbox CSS properties to Flex props

#### Flexbox CSS property => Flex prop:

- `flex-direction` => `direction`
- `justify-content` => `justifyContent`
- `align-items` => `alignItems`
- `align-content` => `alignContent`
- `flex-wrap` => `wrap`
- `gap` => `gap`

#### Default prop values:

- `direction="row"`
- `justifyContent="normal"`
- `alignItems="stretch"`
- `alignContent="normal"`
- `wrap="nowrap"`
- `gap="1rem"`

## CSS Styling

### Target classes

<ComponentStyleDisplay componentName="Flex" />